<template>
    <div>
        <h1>基础布局</h1>
        <el-row>
            <el-col :span="24">
                <div class="网格内容 tw:bg-purple-700"></div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
                <div class="网格内容 tw:bg-purple-500"></div>
            </el-col>
            <el-col :span="12">
                <div class="网格内容 tw:bg-purple-300"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <div class="网格内容 tw:bg-purple-500"></div>
            </el-col>
            <el-col :span="8">
                <div class="网格内容 tw:bg-purple-300"></div>
            </el-col>
            <el-col :span="8">
                <div class="网格内容 tw:bg-purple-500"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6">
                <div class="tw:bg-purple-500 网格内容"></div>
            </el-col>
            <el-col :span="6">
                <div class="tw:bg-purple-300 网格内容"></div>
            </el-col>
            <el-col :span="6">
                <div class="tw:bg-purple-500 网格内容"></div>
            </el-col>
            <el-col :span="6">
                <div class="tw:bg-purple-300 网格内容"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4" class="tw:bg-purple-500 网格内容"></el-col>
            <el-col :span="4" class="tw:bg-purple-300 网格内容"></el-col>
            <el-col :span="4" class="tw:bg-purple-500 网格内容"></el-col>
            <el-col :span="4" class="tw:bg-purple-300 网格内容"></el-col>
            <el-col :span="4" class="tw:bg-purple-500 网格内容"></el-col>
            <el-col :span="4" class="tw:bg-purple-300 网格内容"></el-col>
        </el-row>
    </div>
    <div>
        <h1>分栏间隔</h1>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
            <el-col :span="6">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
            <el-col :span="6">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
            <el-col :span="6">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
        </el-row>
    </div>
    <div>
        <h1>混合布局</h1>
        <el-row :gutter="20">
            <el-col :span="16">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
            <el-col :span="8">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
        </el-row>
        <el-row :gutter="16">
            <el-col :span="8">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
            <el-col :span="8">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
            <el-col :span="4">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
            <el-col :span="4">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
        </el-row>
        <el-row :gutter="8">
            <el-col v-for="(宽度, 索引) in [4, 16, 4]" :key="索引" :span="宽度">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
        </el-row>
    </div>
    <div>
        <h1>列偏移</h1>
        <el-row :gutter="16">
            <el-col :span="6">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
            <el-col :span="6" :offset="6">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
        </el-row>
        <el-row :gutter="16">
            <el-col :span="6" :offset="6">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
            <el-col :span="6" :offset="6">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
        </el-row>
        <el-row :gutter="16">
            <el-col :span="12" :offset="6">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
        </el-row>
    </div>
    <div>
        <h1>对齐方式</h1>
        <el-row class="tw:bg-gray-100">
            <el-col :span="6">
                <div class="tw:bg-gray-500 网格内容"></div>
            </el-col>
            <el-col :span="6">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
            <el-col :span="6">
                <div class="tw:bg-gray-500 网格内容"></div>
            </el-col>
        </el-row>
        <el-row class="tw:bg-gray-100" justify="center">
            <el-col :span="6">
                <div class="tw:bg-gray-500 网格内容"></div>
            </el-col>
            <el-col :span="6">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
            <el-col :span="6">
                <div class="tw:bg-gray-500 网格内容"></div>
            </el-col>
        </el-row>
        <el-row class="tw:bg-gray-100" justify="end">
            <el-col :span="6">
                <div class="tw:bg-gray-500 网格内容"></div>
            </el-col>
            <el-col :span="6">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
            <el-col :span="6">
                <div class="tw:bg-gray-500 网格内容"></div>
            </el-col>
        </el-row>
        <el-row class="tw:bg-gray-100" justify="space-between">
            <el-col :span="6">
                <div class="tw:bg-gray-500 网格内容"></div>
            </el-col>
            <el-col :span="6">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
            <el-col :span="6">
                <div class="tw:bg-gray-500 网格内容"></div>
            </el-col>
        </el-row>
        <el-row class="tw:bg-gray-100" justify="space-around">
            <el-col :span="6">
                <div class="tw:bg-gray-500 网格内容"></div>
            </el-col>
            <el-col :span="6">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
            <el-col :span="6">
                <div class="tw:bg-gray-500 网格内容"></div>
            </el-col>
        </el-row>
        <el-row class="tw:bg-gray-100" justify="space-evenly">
            <el-col :span="6">
                <div class="tw:bg-gray-500 网格内容"></div>
            </el-col>
            <el-col :span="6">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
            <el-col :span="6">
                <div class="tw:bg-gray-500 网格内容"></div>
            </el-col>
        </el-row>
    </div>
    <div>
        <h1>响应式布局</h1>
        <el-row :gutter="8">
            <el-col v-for="(尺寸, 索引) in [[8, 6, 4, 3, 1], [4, 6, 8, 9, 11], [4, 6, 8, 9, 11], [8, 6, 4, 3, 1]]" 
            :key="索引" 
            :xs="尺寸[0]" 
            :sm="尺寸[1]" 
            :md="尺寸[2]" 
            :lg="尺寸[3]" 
            :xl="尺寸[4]">
                <div class="tw:bg-gray-300 网格内容"></div>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped>
    .el-row {
        margin-bottom: 20px;
    }
    .el-row:last-child {
        margin-bottom: 0;
    }
    .el-col {
        border-radius: 4px;
    }
    .网格内容 {
        border-radius: 4px;
        min-height: 36px;
    }
</style>